<template>
  <div class="order-container">
    <van-tabs v-model="active" @change="tabChange">
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="待发货"></van-tab>
      <van-tab title="待收货"></van-tab>
      <van-tab title="待评价"></van-tab>
      <van-tab title="已完成"></van-tab>
      <van-tab title="退款/退货"></van-tab>
    </van-tabs>
    <div class="main-container" v-if="List.length">
      <div class="main-item" v-for="(item, index) in List" :key="index" @click="goDetails(item)">
        <div class="left-container">
          <img :src="imgUrl + item.indexpic" alt />
        </div>
        <div class="right-container">
          <div class="name">{{ item.title }}</div>
          <div class="footer">
            <div class="price">${{item.price}}</div>
            <div class="btn" v-if="item.status === 0" @click.stop="payShow = true; payOrderInfo = item">确认付款</div>

            <div class="btn" v-if="item.status === 1" @click.stop="goRefund(item)">去退款</div>
            <div class="btn" v-if="item.status === 2" @click.stop="goRefund(item)">去退款</div>
            <div class="btn" v-if="item.status === 2" @click.stop="confirmReceipt(item)">确认收货</div>
            <div class="btn" v-if="item.status === 6" @click.stop="goEvaluate(item)">去评价</div>
            <div class="btn" v-if="item.status === 7">查看详情</div>
            <div class="btn" v-if="item.status === 3">查看详情</div>
          </div>
        </div>
      </div>
    </div>
    <van-empty description="暂时没有相关订单" v-else>
      <van-button round type="danger" class="bottom-button" @click="goHome">去逛逛</van-button>
    </van-empty>

    <!-- 支付订单 -->
    <van-action-sheet
      v-model="payShow"
      title="请选择支付方式"
      :actions="payActions"
      cancel-text="取消"
      close-on-click-action
      @select="payClick"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      payShow: false,
      payActions: [
        {
          name: "微信支付",
          index: 1
        },
        {
          name: "银联支付",
          index: 2
        },
        {
          name: "货到付款",
          index: 3
        }
      ],
      active: 0,
      payOrderInfo: null,
      List: [],
      obj: {
        0: 1,
        1: 2,
        2: 3,
        6: 4,
        3: 5,
        5: 6
      }
    };
  },
  computed: {
    imgUrl() {
      return this.$imgUrl;
    }
  },
  created() {
    this.active = this.obj[this.$route.query.index];
    // console.log()
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 0: "待付款"
    // 1: "待发货"
    // 2: "待收货"
    // 3: "已完成"
    // 6: "待评价"
    // 8: "拼团中"
    async getList() {
      const obj = {
        0: null,
        1: 0,
        2: 1,
        3: 2,
        4: 6,
        5: 3,
        6: 7
      };
      const result = await this.$fetchGet("/home/member/order", {
        status: obj[this.active]
      });
      if (!result.success) {
        this.$toast(result.msg);
        return;
      }
      this.List = result.data.listdetail || [];
      console.log(result);
    },
    tabChange() {
      this.getList();
    },
    goHome() {
      this.$router.push("/");
    },
    async payClick(action, index) {
      if (action.index !== 1) {
        this.$toast('选择支付方式开发中')
        return
      }
      const result = await this.$fetchGet("/home/pay/wxpay", {
        orderno: this.payOrderInfo.orderno
      });
      if (result.success) {
        window.location.href = result.data.url
      } else {
        this.$toast(result.msg)
      }
    },
    onCancel() {
      this.payOrderInfo = null
    },
    /*
     *@name: 去退款
     *@param:{type} 
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-06-06 14:12:15
    */
    goRefund (item) {
      this.$router.push({
        path: '/applyReturn',
        query: {
          orderno: item.orderno
        }
      })
    },
    /*
     *@name: 确认收货
     *@param:{type} 
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-06-06 15:09:39
    */
    confirmReceipt (item) {
      this.$dialog.confirm({
        title: '温馨提示',
        message: '是否确认收货？',
        beforeClose: async (action, done) => {
          if (action === 'cancel') {
            done()
            return
          }
          const result = await this.$fetchGet('/home/member/confirmorder', {
            orderno: item.orderno
          })
          if (!result.success) {
            this.$toast(result.msg)
            return
          }
          this.$toast('收货成功')
          done()
          this.getList()
        }
      })
    },
    /*
     *@name: 去订单详情
     *@param:{type} 
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-06-06 15:37:48
    */
    goDetails (item) {
      this.$router.push({
        path: '/order-details',
        query: {
          orderno: item.orderno
        }
      })
      console.log(item)
    },
    /*
     *@name: 去评价
     *@param:{type} 
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-06-06 17:02:33
    */
    goEvaluate (item) {
      this.$router.push({
        path: '/evaluate',
        query: {
          orderno: item.orderno
        }
      })
      console.log(item)
    }
  }
};
</script>

<style lang="scss">
.order-container {
  .main-container {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    background: #ffffff;
    .main-item {
      display: flex;
      padding: 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #d8d8d8;
      .left-container {
        img {
          width: 200px;
          height: 200px;
        }
      }
      .right-container {
        flex: 1;
        margin-left: 50px;
        display: flex;
        flex-direction: column;
        .name {
          font-size: 30px;
          font-weight: bold;
          flex: 1;
        }
        .footer {
          display: flex;
          .price {
            font-size: 27px;
            font-weight: bold;
            color: #ff3b3b;
            flex: 1;
          }
          .btn {
            // width: 180px;
            // height: 60px;
            padding: 15px 20px;
            color: #fff;
            font-weight: bold;
            border-radius: 20px;
            text-align: center;
            margin-left: 10px;
            // line-height: 60px;
            background: linear-gradient(to right, #fc8f04, #f71c19);
          }
        }
      }
    }
  }
}
</style>